Routes

安裝完成後我們可以點開 page 資料夾看到裡面有一個 index.vue 的檔案，而這同時也是我們的網址預設的首頁、根目錄。

而昨天提到了 NuxtJS 幫有著十分方便的路由設定，他可以根據 page 資料夾的檔案結構來產生路由，意思是說今天我們想要有個 /profile 路徑的頁面的話，只要在 page 資料夾裡面新增一個 profile.vue 或是在一個 profile 的資料夾中新增 index.vue 作為 profile 路徑的主頁面。

一般而言會使用第二個新增資料夾的做法，因為這樣的話可以在往後需求新增時在資料夾中新增其他頁面：

Mavigation

在頁面間移動的話除了用 <a href="#"></a> 之外，Nuxt 有提供一個叫做 <NuxtLink> 的方式來讓你在專案內的頁面間移動，而若是要連往其他網站的超連結，還是一樣用 a 標籤來做就可以了：

<template>
  <NuxtLink to="/profile">Go to profile</NuxtLink>
  <a href="https://test.org">Go out!</a>
</template>

使用 NuxtLink 作為連接方式的話，Nuxt 會先去取得 NuxtLink 連過去頁面的內容（prefetchLinks），當然，也可以讓他不要去做這件事情：

<NuxtLink to="/about" no-prefetch>About page not pre-fetched</NuxtLink>
<NuxtLink to="/about" :prefetch="false">About page not pre-fetched</NuxtLink>

或是反過來在 nuxt.config.js 中把 prefetchLinks 用 false 給關掉，只在想要 prefetch 的 NuxtLink 上加入 prefetch：

export default {
    router: {
        prefetchLinks: false
    }
}

在該連結啟用 prefetch

<NuxtLink to="/about" prefetch>About page pre-fetched</NuxtLink>

Directory Structure

• .nuxt
  他是一個動態產生的資料夾，每當你執行 nuxt dev 或是 nuxt build 的時候都會重新產生。
• assets
  這個資料夾裡面有尚未打包的靜態資源、CSS、圖片、字體等等。
• components
  在此資料夾會放 Vue.js 的原件，這些元件可以被引入 page、layout 或是其他的 components 中使用。（如果在 nuxt.config.js 設定 components: true 的話，就可以不用寫 import 直接在 template 上引用：link）
• dist
  在執行 nuxt generate 後會動態地產生這個資料夾，其內容為部署靜態網站時必須的靜態頁面檔案。
• layouts
  建立版面，可以套用在每個頁面上，像是 header、footer、sidebar 這些每個頁面上都要有的元件，就可以放在 layouts 中。
• middleware
  在這資料夾底下的檔案會在 page、layout 渲染出來之前被執行，而 middleware 又分為 global、layout、page 這三個，執行順序依序為 global -> layout -> page（詳見：Nuxt.js 2.x 實戰手冊(5) - 生命週期(lifecycle)）
• pages
  在這資料夾裡面的檔案會被視為一個一個的頁面，此資料夾中的頁面結構同時也會成為此專案的路由設定。
• static
  在這個資料夾中的檔案可以直接從 root 路徑去讀取到，會放在這裡的檔案基本上是不太會變動的靜態檔案。
• store
  在這邊放置 Vuex Store 的檔案。
• nuxt.config.js
  可在這邊對 Nuxt 預設的設定（）進行更改。

參考

NuxtJS official site
NuxtJS Github